<template>
  <section id="examples" class="bg-white py-12">
    <div class="container mx-auto px-4">
      <div class="text-center mb-10">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">看小说如何变成漫画</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">这些精彩案例展示了不同风格的小说如何转化为生动的漫画</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <ExampleCard 
          v-for="(example, index) in examples" 
          :key="index"
          :category="example.category"
          :style="example.style"
          :title="example.title"
          :description="example.description"
          :image="example.image"
        />
      </div>
      
      <div class="text-center mt-10">
        <button class="px-6 py-3 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          查看更多示例 <i class="fa fa-arrow-right ml-1"></i>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import ExampleCard from './ExampleCard.vue'

const examples = ref([
  {
    category: "科幻",
    style: "日系风格",
    title: "星际穿越",
    description: "飞船穿过小行星带时剧烈摇晃，李昂紧握着操纵杆，额头渗出的汗珠滴落在控制台上。舷窗外，巨大的蓝色星球正在缓缓转动。",
    image: "https://picsum.photos/id/1035/600/400"
  },
  {
    category: "爱情",
    style: "唯美风格",
    title: "雨中邂逅",
    description: "她收起雨伞，抖落上面的水珠，抬头看见咖啡馆窗边的少年正在微笑。阳光透过玻璃，在他睫毛上投下细碎的阴影。",
    image: "https://picsum.photos/id/1062/600/400"
  },
  {
    category: "悬疑",
    style: "暗黑风格",
    title: "午夜来信",
    description: "信封上没有寄件人地址，只有一行用红色墨水写的字：'别回头'。壁炉里的火焰突然摇曳了一下，墙上的影子仿佛活了过来。",
    image: "https://picsum.photos/id/1058/600/400"
  }
])
</script>